<template>
	<view class="section">
		<view class="first">
			<view class="header" :style="{'margin':margin,'padding':padding}" v-if="isHeader">
				<view class="decoration" :style="{'background':color,'width':width,'height':height}" />
			</view>
			<view class="content" :style="{'margin':margin,'padding':padding}">
				<text :style="{'fontsize':size}">{{title}}</text>
			</view>
		</view>
		<view class="value">
			<text>{{value}}</text>
		</view>
	</view>
</template>

<script setup>
	const props = defineProps({
		//是否需要竖线
		isHeader: {
			type: Boolean,
			default: true
		},
		//竖线的高度
		height: {
			type: String,
			default: '30rpx'
		},
		//竖线的宽度
		width: {
			type: String,
			default: '8rpx'
		},
		//竖线的颜色
		color: {
			type: String,
			default: '#3E3B4E'
		},
		//margin间距
		margin: {
			type: String,
			default: '20rpx 0rpx 20rpx 20rpx'
		},
		padding: {
			type: String,
			default: ''
		},
		//标题
		title: {
			type: String,
			default: "标题"
		},
		//标题字体颜色
		titleColor: {
			type: String,
			default: "#0f0f0f"
		},
		//标题大小
		size: {
			type: String,
			default: '30rpx'
		},
		//补充内容
		value: {
			type: String,
			default: ''
		}
	})
</script>

<style lang="scss">
	.section {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.first {
			display: flex;
			align-items: center;
		}
		.value{
			margin-right: 20rpx;
			font-size: 30rpx;
			font-weight: bold;
			color: #999999;
		}
	}

	.decoration {
		border-radius: 5rpx;
	}

	.content {
		font-weight: bold;
	}
</style>